<template>
  <nutbig-turntable
    class="turntable"
    ref="turntable"
    :width="luckWidth"
    :height="luckheight"
    :prize-list="prizeList"
    :turns-number="turnsNumber"
    :turns-time="turnsTime"
    :prize-index="prizeIndex"
    :style-opt="styleOpt"
    :pointer-style="pointerStyle"
    @start-turns="startTurns"
    @end-turns="endTurns"
  >
  </nutbig-turntable>
</template>
<script>

import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import {queryActivityAwardInfoListByJD,doDrawExec} from '../api/lottery';

export default {
  name: "JdLucky",

  setup() {
    const activityId = ref(null); // 声明为响应式变量
    const awardName = ref(null); // 声明为响应式变量
    onMounted(() => {
      // 组件挂载后执行的逻辑
      initPrizeList();
    });
    const turntable = ref(null);
    // 转盘大小
    const luckWidth = ref("400px");
    const luckheight = ref("400px");
    // 转盘指针图片样式
    const pointerStyle = {
      width: "80px",
      height: "80px",
      backgroundImage:
        'url("https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png")',
      backgroundSize: "contain",
      backgroundRepeat: "no-repeat",
    };
    // 转盘上要展示的奖品数据 默认空 从后台获取
    const prizeList = ref([]);
    // 转动圈数
    const turnsNumber = ref(5);
    // 转动需要持续的时间(秒)
    const turnsTime = ref(5);
    // 转盘样式的选项
    const styleOpt = reactive({
      // 转盘中每一块扇形的背景色,根据奖品的index来取每一块的对应颜色
      prizeBgColors: [
        "rgb(255, 231, 149)",
        "rgb(255, 247, 223)",
        "rgb(255, 231, 149)",
        "rgb(255, 247, 223)",
        "rgb(255, 231, 149)",
        "rgb(255, 247, 223)",
        "rgb(255, 231, 149)",
       
      ],
      // 每一个扇形的外边框颜色
      borderColor: "#ff9800",
    });
    // 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
    const prizeIndex = ref(-1);
    // const prizeIndex = ref(new Promise((resolve) => resolve(-1))); // 初始值为 Promise 对象
    // 剩余抽奖次数
    const num = ref(5);
   
    const startTurns = () => {
    
    const indexPromise = draw(activityId.value); 
      indexPromise
        .then((index) => {
          console.log(index);
          prizeIndex.value = index; // 更新 prizeIndex 的值
          turntable.value.rotateTurn();
        })
        .catch((error) => {
          console.error(error);
        });
    };
    const initPrizeList = () => {
      queryActivityAwardInfoListByJD(100001).then((response) => {
          console.log(response)
          prizeList.value = response.data.activityAwardRich.jdPrizeList;
          activityId.value = response.data.activityAwardRich.activityId;
        })
        .catch((error) => {
          console.error(error);
        });
    };
    // 执行抽奖 如果失败 超时异常等 未返回奖品名称 都算未中奖 在catch中需处理 否则转盘一只转
    const draw = (activityId) => {
      return new Promise((resolve, reject) => {
        console.log(activityId);
          const param = {"activityId":activityId,"uId":"admin"}
          // 置空抽奖名称
          awardName.value = null
          doDrawExec(param).then((response) => {
             if("D001" === response.data.code ){
              ElMessage.error(response.data.info);
              awardName.value = response.data.info;
              resolve(-1); 
            }
            if("0000" === response.data.code){
            // 奖品名称
            const drawName = response.data.drawAwardInfo.awardName;
            // 赋值抽奖名称
            awardName.value = drawName;
            // 找到索引值
            const index = prizeList.value.findIndex(
              (item) => item.prizeName.toLowerCase() === drawName.toLowerCase()
            );
            console.log(index);
            resolve(index); // 返回索引结果
            }else{
               ElMessage.error(response.data.info);
                resolve(-1); 
            }
           
           
          })
          .catch((error) => {
            console.error(error);
            reject(-1); // 返回异常结果
          });
      });
    };
    const endTurns = () => {
       if(awardName.value && awardName.value != "未中奖"){
         ElMessage.success("恭喜您抽中:" + awardName.value + "奖品");
       }else{
         ElMessage.error("感谢您的参与");
       }
       
      console.log("抽奖结束~~~~~~~~~~~~~~~");
    };
    return {
      turntable,
      luckWidth,
      luckheight,
      pointerStyle,
      prizeList,
      turnsNumber,
      turnsTime,
      styleOpt,
      prizeIndex,
      num,
      startTurns,
      endTurns,
    };
  },
};
</script>
